<template>
  <div ref="mapViewDiv" class="mapView-root"></div>
</template>
<script>
import WMTSLayer from "esri/layers/WMTSLayer";
import WebTileLayer from "esri/layers/WebTileLayer";
import Map from "esri/Map";
import MapView from "esri/views/MapView";
import WebMap from "esri/WebMap";
import SceneView from "esri/views/SceneView";
import { ref, onMounted } from "vue";

export default {
  name: "EsriMap",
  props: {
    radius: {
      type: Number,
      default: 60,
    },
  },
  setup() {
    let mapViewDiv = ref("mapViewDiv");

    const { clusterMap } = useMap();
    onMounted(() => {

      var view = new SceneView({
        container: mapViewDiv.value,
        map: clusterMap,
        center:[-65, -15],
        scale: 123456789,
      });

    });

    return { mapViewDiv };
  }, //end setup
};
const useMap = () => {
  var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
  var token = "56b81006f361f6406d0e940d2f89a39c"; //天地图token

  var map = new Map({
    ground: "world-elevation",
  });
  //矢量地图(球面墨卡托投影)
  var tiledLayer = new WebTileLayer({
    urlTemplate:
      tiandituBaseUrl +
      "/vec_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=vec&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
      token,
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  });

  //矢量注记(球面墨卡托投影)
  var tiledLayerAnno = new WebTileLayer({
    urlTemplate:
      tiandituBaseUrl +
      "/cva_w/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=cva&STYLE=default&FORMAT=tiles&TILEMATRIXSET=w&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
      token,
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
  });

  let clusterMap = new Map({
    layers: [tiledLayer,tiledLayerAnno],
  });
  return { clusterMap };
};
</script>
<style scoped>
.mapView:focus,
.mapView-root:focus {
  outline: none !important;
}

.mapView-root {
  background-color: darkkhaki;
  width: 1000px;
  height: 800px;
}
</style>